<!-- SAIL-0004 新增vue页面 -->
<template>
  <s-layout>
    <view class="container">
      <view class="filter-container">
        <!-- 搜索框 -->
        <view class="search-box">
          <view class="search-input-wrapper">
            <fui-icon name="search" :size="36" color="#BDBDBD"></fui-icon>
            <input 
              v-model="searchKeyword" 
              type="text" 
              placeholder="搜索关键字" 
              @input="handleSearch" 
              class="search-input"
            />
            <view class="clear-btn" v-if="searchKeyword" @tap="clearSearch">
              <fui-icon name="close-fill" :size="28" color="#BDBDBD"></fui-icon>
            </view>
          </view>
        </view>
      </view>
     
      <view class="contain_1">
        <!-- <fui-button
          @click="
            sheep.$router.go('/pages/qy/security/add', {}, { reLaunch: true })
          "
          btnSize="mini"
          >添加</fui-button
        > -->
        <view
          class="box_1"
          v-for="(item, index) in filteredMeetingList"
          :key="index"
          @click.stop="
            sheep.$router.go(`/pages/qy/security/detail?id=${item.id}`)
          "
        >
          <view class="spacer"></view>
          <view class="card">
            <view class="card_box">
              <view class="card_date">{{ item.date }}</view>
              <view class="header-right">
                <view
                  class="cicon-more"
                  style="font-size: 50rpx;
                  left: 430rpx;"
                  @click.stop="editBoxShow(item)"
                ></view>

                <!-- This editBox is now tied to the specific item -->
                <view class="editBox" v-if="activeEditItemId === item.id">
                  <view
                    class="editBox-item"
                    @click.stop="
                      sheep.$router.go(`/pages/qy/security/update`, {
                        id: item.id,
                      });
                      activeEditItemId = null; // Hide menu after clicking
                    "
                  >
                    <text class="editBox-item-text">修改</text>
                  </view>
                  <view class="editBox-item" @click.stop="deleteItem(item)">
                    <!-- confirmDelete already handles hiding the menu -->
                    <text class="editBox-item-text">删除</text>
                  </view>
                </view>

              </view>
            </view>
            <view class="title">{{ item.title }}</view>
            <view class="activityList">
              <view class="card_pic">
                <fui-swiper-dot
                  :items="item.images"
                  :current="current"
                  class="drill-image"
                >
                  <swiper
                    class="banner-wrap"
                    circular
                    autoplay
                    @change="onChange"
                  >
                    <swiper-item
                      v-for="(img, index) in item.images"
                      :key="index"
                    >
                      <image
                        class="banner-image"
                        :src="img"
                        mode="aspectFill"
                      />
                    </swiper-item>
                  </swiper>
                </fui-swiper-dot>
              </view>
              <view class="footer">
                <view class="card_title">{{ item.title }}</view>
                <view class="time-location">
                  <view class="card_time"
                    >{{ item.startTime }} - {{ item.endTime }}</view
                  >
                  <view class="card_address">{{ item.address }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <fui-button
      @click="sheep.$router.go('/pages/qy/security/update')"
      radius="96rpx"
      btnSize="medium"
      style="
        position: fixed;
        bottom: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 16px;
        border: none;
        font-size: 30rpx;
      "
      ><text
        class="cicon-add-round-o"
        style="font-size: 40rpx; margin-right: 20rpx"
      ></text>
      <p>添加</p>
    </fui-button>
  </s-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import sheep from "@/sheep";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";

const value = ref(""); // 搜索框的绑定值
const meetingScheduleList = ref([
  {
    pic: "https://img0.baidu.com/it/u=216538351,1009051460&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
    title: "企业消防演练与火灾应急处置",
    date: "2024年 5月8日",
    time: "09:00-11:50",
    address: "杭州白金汉爵大酒店 368星空厅",
  },
]); // 活动数据
// 创建事件监听函数
const handleDataUpdate = () => {
  console.log('安全检查列表页收到数据更新事件，准备刷新数据');
  // 使用延迟确保DOM已完全渲染
  setTimeout(() => {
    console.log('开始刷新安全检查列表数据');
    get();
  }, 100); // 短暂延迟确保DOM已渲染
};

// 在页面加载时设置事件监听
onLoad(() => {
  // 注册事件监听
  uni.$on('securityDataUpdated', handleDataUpdate);
  get();
});

// 在页面卸载时移除事件监听
onUnload(() => {
  console.log('页面卸载，移除事件监听');
  uni.$off('securityDataUpdated', handleDataUpdate);
});

onShow(() => {
  // 页面显示时获取数据，但不重复注册事件
  // 事件监听已在onLoad中注册
});
function deleteItem(item) {
  const params = {
    tr_id: item.id,
  };
  sheep.$api.qy_security.delete(params).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
    }
    get()
  });
}
function get() {
  const params = {
    company_id: sheep.$store("user").userInfo.company_id,
  };

  sheep.$api.qy_security.list(params).then((res) => {
    console.log("security", res.data);
    meetingScheduleList.value = res.data;
    filteredMeetingList.value = res.data; // 初始化过滤后的数据与原始数据相同
  });
}
// 用于存储当前显示编辑框的项目的 ID
// 初始化为 null，表示初始时没有任何编辑框显示
const activeEditItemId = ref(null);
// 点击"更多"图标时触发的函数
const editBoxShow = (item) => {
  // 获取被点击项目的 ID
  const currentItemId = item.id;
  // 检查：如果当前点击的项目的编辑框 *已经* 是显示的那个
  if (activeEditItemId.value === currentItemId) {
    // 就将其隐藏（通过将 activeEditItemId 设置回 null）
    activeEditItemId.value = null;
  } else {
    // 否则，显示当前点击项目的编辑框
    // 这会自动隐藏之前可能打开的任何其他项目的编辑框
    activeEditItemId.value = currentItemId;
  }
  console.log("当前显示编辑框的项目 ID:", activeEditItemId.value);
};

const searchKeyword = ref("");
const filteredMeetingList = computed(() => {
  if (!searchKeyword.value) {
    return meetingScheduleList.value;
  }
  return meetingScheduleList.value.filter(item =>
    item.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

function handleSearch() {
  // 使用计算属性自动过滤
}

function clearSearch() {
  searchKeyword.value = "";
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}

/* 筛选区域样式 */
.filter-container {
  background-color: #fff;
  padding-bottom: 10rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-box {
  padding: 0rpx 20rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 40rpx;
  padding: 10rpx 24rpx;
  margin-bottom: 24rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.clear-btn {
  padding: 8rpx;
}

.box {
  width: 100%;
  background-color: white;
}

.contain_1 {
  background-color: #f1f1f1;
  margin-top: -10px;
  height: 100%;
}

.box_1 {
  margin-top: 0;
}

.card {
  margin: 0 10px;
  width: 93%;
  min-width: 260px;
  background-color: white;
  border-radius: 7px;
  padding-bottom: 10px;
}

.card_box {
  display: flex;
  margin: 15px;
  align-items: center;
  justify-content: space-between;
}

.card_date {
  background: linear-gradient(to right, #0052d9 50%, #ff9900 99.9%);

  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 21px;
  font-weight: 700;
  margin-left: -10px;
  margin-top: 5px;
}

.card_tag {
  position: relative;
  left: 315px;
  top: -147px;
  font-size: 15px;
  font-weight: 450;
}

.card_pic {
  width: 100%;
  height: 150px;
  margin-top: 10px;
}

.pic {
  width: 100%;
  height: 180px;
}

.footer {
  padding-top: 40px;
  padding-left: 10px;
  margin-bottom: 15px;
}

.card_title {
  color: #8f8e8e;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 16px;
  margin-top: 5px;
}

.title {
  background-image: linear-gradient(to right, #4f4e4e 0%, #4f4e4e 100%);

  display: flex;
  font-weight: 550;
  letter-spacing: 0.5px;
  font-size: 22px;
  margin-left: 4px;
  margin-top: -12px;

  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 确保背景覆盖整个文本 */
  background-size: 200% 100%;
  background-position: 0 0; /* 从左到右应用渐变 */
}

.card_time {
  font-size: 13px;
  color: #cfab8e;
  background-color: #fcf8e8;
  padding: 2px 2px;
}

.card_address {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-left: auto;
  margin-top: -5px;
}

.spacer {
  background-color: #ececec;
  height: 10px;
}

.time-location {
  display: flex;
  margin-top: 10px;
}
.header-right {
  position: relative;
  left: 5rpx;
  .cicon-more {
    width: 50rpx;
    height: 50rpx;
    background: url("https://example.com/more-icon.png") no-repeat center; // 替换为更美观的图标
    background-size: contain;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.1);
    }
  }

  .editBox {
    position: absolute;
    right: 0;
    top: 60rpx;
    background-color: #fff;
    width: 130rpx;
    border-radius: 8rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    overflow: hidden;
    animation: fadeIn 0.3s ease;

    .editBox-item {
      padding: 16rpx;
      text-align: center;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f5f5;
      }

      .editBox-item-text {
        font-size: 25rpx;
        color: #333;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
